<html>
<head>
<title> Test Page </title>
<style type="text/css">
			.header-left {
				padding: 0;
				width: auto;
			}
			#header h1,
			#header h4 {
				text-indent: -9000px;
				margin: 0;
				padding: 0;
			}
			#header h1 a,
			#header h4 a {
				display: block;
				margin: 0;
				width: 960px;
				height: 80px;
			}
			p#description {
				display: none;
			}
			#tables tr{
				width: 450px;
			}
			#tables img{
				color: #334127;
				text-align:center;
				margin-top:-10px;				
				margin-bottom:-40px;
			}
			#tables h3{
				color: #334127;
				text-align:center;
				font-size:180%;
			}
			#tables a:hover{
				text-decoration:none;
			}
			#topbar {
				background-repeat:no-repeat;
				background-image:url('images/bartop.png');
				width:640px;
				height:28px;
			}
			#lowbar {
				background-repeat:no-repeat;
				background-image:url('images/barbot.png');
				width:640px;
				height:28px;
			}
			#eventInfo {
				padding-left:10px;
				padding-right:10px;
				margin-bottom:-16px;
				margin-left:-2px;
				background-repeat:no-repeat;
				background-image:url('images/barmid.png');
				width:618px;
				height:auto;
				background-size:cover;
			}
			#image img{
				max-width:220px;
				height:auto;
				padding-bottom:20px;
			}
			#event_links a{
				font-size:170%;
				text-decoration:underline;
				color:#52CC29;
			
			}
			#image{
				float:left;
				margin-right:20px;
			}
			#dateInfo{
				float:left;
				margin-right: 20px;
				padding-bottom:5px;
			}



			#eventName{
				font-size:400%;	
				margin-bottom:-10px;
			}
			#dateInfo{
				font-size:170%;	
			}
			#eventLocation{
				font-size:170%;	
			}
			#eventTime{
				font-size:170%;	
				margin-top:5px;
			}
			#eventDescription{
				margin-top:5px;	
				 
    				overflow: hidden;
    				text-overflow: ellipsis;
			}
		</style>
		
<script type="text/javascript">

	function loadMainEvent(){
	document.getElementById("event-image").src="images/event.jpg";

		document.getElementById("eventName").innerHTML = "50/50";
		document.getElementById("dateInfo").textContent = "03/14/12";
		document.getElementById("eventLocation").innerHTML = "Cosford Cinema";
		document.getElementById("eventTime").innerHTML = "8:00PM";
		document.getElementById("eventDescription").innerHTML = "CAC Weekly Wednesday Screening: <p><p>Wednesday at 8 & 10:30<p>Saturday at 10<p>Sunday at 8<p><p>Adam is a 27 year old writer of radio programs and is diagnosed with a rare form of spinal cancer. With the help of his best friend, his mother, and a young therapist at the cancer center, Adam learns what and who the most important things in his life are";
	}
</script>
</head>
<body onload="loadMainEvent();">
<div id="event" align="center">
<div id="topbar"></div>
<div id="eventInfo" >	<div id="image">
			<img id="event-image"></div>
			<div id="info" align="left" >
			<div id="eventName">
			</div>
			<hr />
			<div id="dateInfo">
			</div>

			<div id="eventTime">
			</div>
						<hr />
			<div id="eventLocation">
			</div>
						<hr />
			<div id="eventDescription">
			</div>
			<div id="moreInfo" align="right"><a href="event.html">More Info &#8250;&#8250;</a>
			</div>
			</div>
</div>
<div id="lowbar"></div>
</div>

<div id="tables">
<table id="row1" align="center">

	<tr>
				<td style="background-repeat:no-repeat;background-image:url('images/box.png');width:205px;height:215px;">
					<a href="calendar.html">
					<img src="images/CalIcon.png" height="205" width = "205">
					<h3> View Full Calendar &#8250;&#8250;</h3>
					</a>
				</td>
				<td style="background-repeat:no-repeat;background-image:url('images/box.png');width:205px;height:215px;">
					<a href="volunteerform.html">
					<img src="images/VolIcon.png" height="205" width = "205">
					<h3> Volunteer/Get Info &#8250;&#8250;</h3>
					</a>
				</td>
				<td style="background-repeat:no-repeat;background-image:url('images/box.png');width:205px;height:215px;">
					<a href="suggestion-list.html">
					<img src="images/SuggIcon.png" height="205" width = "205">
					<h3> Event Suggestions &#8250;&#8250;</h3>
					</a>
				</td>
	<tr>
</table>
<table id="row2" align="center">
<tr>
				<td style="background-repeat:no-repeat;background-image:url('images/box.png');width:205px;height:215px;">
					<a href="feedbackform.html">
					<img src="images/MailIcon.png" height="205" width = "205">
					<h3> Contact/Feedback &#8250;&#8250;</h3>
					</a>
				</td>
				<td style="background-repeat:no-repeat;background-image:url('images/box.png');width:205px;height:215px;">
					<a href="http://hurricaneproductions.org/about/">
					<img src="images/question.png" height="205" width = "205">
					<h3> Learn More about HP &#8250;&#8250;</h3>
					</a>
				</td>
<tr>
</table>
</div>
<div id="otherlinks">
Click here to fill out a cosponsorship form&#8250;&#8250;<br>
Admin Login&#8250;&#8250; <br>

</div>
</body>
</html>
